<template>
  <div class="trainDetail">
    <el-row>
      <el-col :span="24"
              class="train-table-top">
        <el-tabs type="border-card">
          <el-tab-pane label="定位地图">
            <div id="allmap"></div>
          </el-tab-pane>
          <el-tab-pane label="定位数据">
            <el-table class="positionTable"
                      :highlight-current-row='true'
                      :data='carTable.list'
                      border
                      :header-cell-style="{background:'#f5f5f5'}">
              <el-table-column label='车次编号'
                               align='center'
                               show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.row.gps_record_car_number?scope.row.gps_record_car_number.car_number:''}}</span>
                </template>
              </el-table-column>
              <el-table-column label='车牌号'
                               align='center'
                               show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.row.car_num}}</span>
                </template>
              </el-table-column>
              <el-table-column label='北斗定位'
                               align='center'
                               show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.row.gps_record_gps?scope.row.gps_record_gps.gps_num:''}}</span>
                </template>
              </el-table-column>
              <el-table-column label='车辆位置'
                               align='center'
                               show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.lat }}-{{ scope.row.lon }}</span>
                </template>
              </el-table-column>
              <el-table-column label='电量'
                               align='center'
                               show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.row.power}}</span>
                </template>
              </el-table-column>
              <el-table-column label='上报时间'
                               align='center'
                               show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.row.upload_time}}</span>
                </template>
              </el-table-column>
            </el-table>
            <el-col :span="24">
              <el-pagination @current-change='handlePageChange'
                             :current-page='requestParam.page'
                             :page-size='requestParam.page_size'
                             layout='total,sizes,prev, pager, next, jumper'
                             background
                             :total='carTable.total_count'
                             align='center'>
              </el-pagination>
            </el-col>
          </el-tab-pane>
          <el-tab-pane label="运输构件">
            <el-col :span="24"
                    class="member-title">
              <el-col :span="12"
                      align="left">运输时间：{{memberTable.transTime}} 构件数量：{{memberTable.total_count}}</el-col>
              <el-col :span="12"
                      align="right">项目名称：{{memberTable.projectName}}</el-col>
            </el-col>
            <el-col :span="24"
                    style="margin-top:20px;">
              <el-table class="positionTable"
                        :highlight-current-row='true'
                        :data='memberTable.list'
                        border
                        :header-cell-style="{background:'#f5f5f5'}">
                <el-table-column prop='memberNo'
                                 label='构件编号'
                                 align='center'
                                 show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{scope.row.trans_det_component?scope.row.trans_det_component.cp_num:''}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop='memberStyle'
                                 label='构件类型'
                                 align='center'
                                 show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{scope.row.trans_det_component?scope.row.trans_det_component.cp_type:''}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop='bdnum'
                                 label='楼号'
                                 align='center'
                                 show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{scope.row.trans_det_component?scope.row.trans_det_component.build_no:''}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop='floornum'
                                 label='层号'
                                 align='center'
                                 show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{scope.row.trans_det_component?scope.row.trans_det_component.floor_no:''}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop='state'
                                 label='运输状态'
                                 align='center'
                                 show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.trans_det_component.status==1?'正常':(scope.row.trans_det_component.status==2?'添加':'换货') }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="24">
              <el-pagination @current-change='handlePageChange'
                             :current-page='requestParams.page'
                             :page-size='requestParams.page_size'
                             layout='total,sizes,prev, pager, next, jumper'
                             background
                             :total='memberTable.total_count'
                             align='center'>
              </el-pagination>
            </el-col>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { trainMonitorApi } from '@/services/WorkCenter'
export default {
  data () {
    return {
      requestParam: {
        page: 1,
        page_size: 10
      },
      requestParams: {
        page: 1,
        page_size: 10
      },
      carTable: {
        list: [],
        total_count: 0
      },
      memberTable: {
        list: [],
        total_count: 0,
        projectName: '',
        transTime: '',
      },
      carId: this.$route.query.id,
      pointList: [],
    }
  },
  methods: {
    handlePageChange (val) {
      this.requestParam = val;
      this.getLocationData();
    },
    initMap () {
      var map = new BMap.Map("allmap");
      map.centerAndZoom("杭州", 11);
      map.centerAndZoom(new BMap.Point(120.20000, 30.26667), 11);
      map.enableScrollWheelZoom();
      map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));
      map.addControl(new BMap.ScaleControl());
      if (this.pointList) {
        var start = new BMap.Marker(new BMap.Point(this.pointList[0].lon, this.pointList[0].lat), {
          icon: new BMap.Icon("https://webapi.amap.com/theme/v1.3/markers/n/start.png", new BMap.Size(30, 82), { imageOffset: new BMap.Size(7, 12) })
        });
        var end = new BMap.Marker(new BMap.Point(this.pointList[this.pointList.length - 1].lon, this.pointList[this.pointList.length - 1].lat), {
          icon: new BMap.Icon("https://webapi.amap.com/theme/v1.3/markers/n/end.png", new BMap.Size(42, 85), { imageOffset: new BMap.Size(10, 11) })
        });
        map.centerAndZoom(new BMap.Point(this.pointList[0].lon, this.pointList[0].lat), 13);
        map.addOverlay(start)
        map.addOverlay(end)
        for (var i = 0; i < this.pointList.length - 2; i++) {
          var polyline = new BMap.Polyline([
            new BMap.Point(this.pointList[i].lon, this.pointList[i].lat),//起始点的经纬度
            new BMap.Point(this.pointList[i + 1].lon, this.pointList[i + 1].lat)//终点的经纬度
          ], {
            strokeColor: "#0091ff",//设置颜色
            strokeWeight: 2, //宽度
            strokeOpacity: 0.9
          });//透明度
          map.addOverlay(polyline);
        }

      }

    },
    getMapData () {
      trainMonitorApi.getMapLocationData({
        data: {
          id: this.carId
        }
      }).then(res => {
        this.pointList = res.data
        this.initMap();
      })
    },
    getLocationData () {
      trainMonitorApi.getLocationData({
        data: {
          id: this.carId,
          page: this.requestParam.page
        }
      }).then(res => {
        this.carTable.list = res.data.data
        this.carTable.total_count = res.data.total
        this.carTable.transTime = res.data.trans_time
        this.carTable.transTime = res.data.trans_time
      })
    },
    //运输构件
    getTransportData () {
      trainMonitorApi.getTransportData({
        data: {
          id: this.carId,
          page: this.requestParams.page
        }
      }).then(res => {
        this.memberTable.list = res.data.data
        this.memberTable.total_count = res.data.total
        this.memberTable.projectName = res.data.project_name
      })
    }
  },
  mounted () {
    this.getMapData()
    this.getLocationData()
    this.getTransportData()
  }
}
</script>

<style lang="scss" scoped>
.trainDetail {
  .train-table-top {
    #allmap {
      width: 100%;
      height: 500px;
    }

    .positionTable {
      margin-bottom: 20px;
    }

    .member-title {
      font-size: 16px;
      color: #909399;
    }
  }
}

/deep/ .BMap_cpyCtrl {
  display: none;
}

/deep/ .anchorBL {
  display: none;
}
</style>